<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="标题" width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column label="图片" width="180">
      <template #default="scope">
        <img :src="scope.row.url" alt="" />
      </template>
    </el-table-column>
    <el-table-column label="描述" prop="desc"></el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" title="编辑" width="30%">
    <div>
      <el-input v-model="editCurrItem.title" placeholder="Please input" />
      <el-input v-model="editCurrItem.desc" placeholder="Please input" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleModify"
          >修改</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { onMounted, ref } from "vue";
import axios from "axios";

interface IDataItem {
  title: string;
  url: string;
  id: string;
  desc: string;
}

export default {
  setup() {
    // 数据
    const tableData = ref<Array<IDataItem>>([]);
    const dialogVisible = ref(false);
    const editCurrItem = ref<IDataItem>();
    // 方法
    const handleEdit = (i: number, item: IDataItem) => {
      dialogVisible.value = true;
      // 克隆一份
      editCurrItem.value = { ...item };
    };

    const handleDelete = (i: number, item: IDataItem) => {
      deleteList(item.id);
    };
    // 请求数据函数
    const fetchList = async () => {
      const res = await axios.get("/api/list");
      tableData.value = res.data.data;
    };
    // 请求删除函数
    const deleteList = async (id: string) => {
      // 发起删除请求
      const res = await axios.post("/api/list/delete", { id });
      // 获取状态吗
      const { code } = res.data;
      // 200 成功
      if (code === 200) {
        // 重新请求数据
        fetchList();
      } else {
        // 失败提示
        alert("删除失败");
      }
    };
    // 请求修改函数
    const modifyList = async () => {
      const resp = await axios.post('/api/list/edit', editCurrItem.value)
      const { code } = resp.data  
      if(code === 200) {
        fetchList()
      } else {
        alert('修改失败！')
      }
    }

    // 修改
    const handleModify = () => {
      dialogVisible.value = false
      modifyList()
    }
    // 生命周期
    onMounted(() => {
      fetchList();
    });

    return {
      tableData,
      handleEdit,
      handleDelete,
      dialogVisible,
      editCurrItem,
      handleModify
    };
  },
};
</script>
